<!--
 * @?: *********************************************************************
 * @Author: Weidows
 * @Date: 2021-06-17 23:59:54
 * @LastEditors: Weidows
 * @LastEditTime: 2021-06-19 21:48:25
 * @FilePath: \UI-assignment\src\main\webapp\2.html
 * @Description:
 * @!: *********************************************************************
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>UI课设-第二页</title>
    <link rel="shortcut icon" href="img/tudoulei.png" type="images/x-5b" />

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/APlayer.min.css" />
    <link rel="stylesheet" href="css/2.css" />
    <script src="js/APlayer.min.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <!--header头部-->
    <header id="header">
      <nav class="navbar" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="logo" href="index.html"
              ><img class="logo" src="img/header.jpg" alt=""
            /></a>
          </div>

          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.html">首页</a></li>
              <li><a class="active" href="#">其他</a></li>
              <li><a href="about.html">联系我们</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <div class="join-page">
      <div class="join-banner">
        <div class="banner_img">
          <img src="img/helloworld.jpg" alt="" />
        </div>
        <ul class="join_sul">
          <li>
            <a href="#shichang">表格<br />音视</a>
          </li>
          <li>
            <a href="#qiye">日历<br />时钟</a>
          </li>
          <li>
            <a href="#zhaoq">页面<br />游戏</a>
          </li>
          <li>
            <a href="#jiamen">新<br />窗口</a>
          </li>
          <li>
            <a href="#chanqin">随机<br />移动</a>
          </li>
          <li>
            <a href="#dom">DOM<br />列表</a>
          </li>
        </ul>
      </div>
      <div class="container">
        <div class="row">
          <h3 id="shichang"><i>1</i> 表格/音乐/视频</h3>
          <div class="col-md-6">
            <table
              width="100%"
              border="3"
              cellspacing="1"
              cellpadding="4"
              bgcolor="#cccccc"
              align="center"
            >
              <tr>
                <th>一</th>
                <th>二</th>
                <th>三</th>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td rowspan="2">4</td>
                <td>5</td>
                <td>6</td>
              </tr>
              <tr>
                <td colspan="2">7</td>
              </tr>
            </table>
            <div id="aplayer"></div>
          </div>
          <div class="col-md-6">
            <video
              src="resources/video.mp4"
              controls
              width="100%"
              height="263px"
            ></video>
          </div>
        </div>

        <div class="row">
          <h3 id="qiye"><i>2</i> 日历/时钟</h3>
          <div class="col-md-6">
            <div class="calendar-container">
              <div class="date-container">
                <span id="preMonth" class="year-prev"></span>
                <span id="nowYear" class="year-now"></span>
                <span id="nowMonth"></span>
                <span id="nowDate"></span>
                <span id="nextMonth" class="year-next"></span>
              </div>
              <div id="weekLine" class="week-line"></div>
              <div id="dateWrap" class="date-wrap"></div>
            </div>
          </div>
          <div class="col-md-6" align="center">
            <div id="nowTime"></div>
            <br />
            <canvas id="clock" width="450px" height="540px"></canvas>
          </div>
        </div>

        <div class="row">
          <h3 id="zhaoq"><i>3</i> 游戏</h3>
          <div id="主体" style="max-height: 500px; overflow: scroll">
            <div id="标题">狗屁不通文章生成器</div>
            <div id="主题">
              <span>主题</span>
              <input id="Bullshit-input" />
              <button onclick="生成文章()">生成</button>
            </div>
            <div id="文章"></div>
          </div>
        </div>

        <div class="row">
          <h3
            id="jiamen"
            onclick="window.open('new-windows.html', '新窗口', 'width=625,height=625')"
          >
            <i>4</i> 弹出新窗口(直接点此处)
          </h3>
        </div>

        <div
          class="row"
          style="margin-bottom: 20px; height: 600px; border: 2px solid #000"
        >
          <h3 id="chanqin"><i>5</i> 图片的随机移动(鼠标悬浮)</h3>
          <img
            id="random-img"
            src="img/原神/2.png"
            alt=""
            style="width: 250px; position: relative; z-index: 999"
          />
        </div>

        <div class="row" style="margin-bottom: 20px">
          <h3 id="dom"><i>6</i> 操作DOM/列表左右选择</h3>
          <div class="col-md-6" align="center">
            <div id="dom-root">
              <ul id="dom-list">
                <li
                  class="dom-li"
                  ondblclick="this.parentNode.removeChild(this)"
                >
                  li-1
                </li>
                <li
                  class="dom-li"
                  ondblclick="this.parentNode.removeChild(this)"
                >
                  li-2
                </li>
                <li
                  class="dom-li"
                  ondblclick="this.parentNode.removeChild(this)"
                >
                  li-3
                </li>
                <li
                  class="dom-li"
                  ondblclick="this.parentNode.removeChild(this)"
                >
                  li-4
                </li>
              </ul>
              <button onclick="add()">追加</button>
              <button onclick="addTo()">插到2前</button>
            </div>
          </div>
          <div class="col-md-6" align="center">
            <div id="middle">
              <button onclick="toLeft()">←</button>
              <button onclick="toRight()">→</button>
            </div>
            <select
              style="width: 40%"
              id="left"
              multiple
              onchange="leftChange(event)"
            >
              <option value="0">草莓</option>
              <option value="1">西瓜</option>
              <option value="2">香蕉</option>
              <option value="3">大象</option>
              <option value="4">蜡笔小新</option>
            </select>
            <select
              style="width: 40%"
              id="right"
              multiple
              onchange="rightChange(event)"
            ></select>
          </div>
        </div>
      </div>
    </div>

    <!--footer-->
    <footer id="footer" id="footer">
      <div class="footer-button">
        <div class="container">
          <p>Copyright: 计科1903 A-123456789910 | 联系方式: A-12345678910</p>
        </div>
      </div>

      <!--友情链接-->
      <div class="footer-top link">
        <div class="container">
          友情链接：
          <a target="_blank" href="http://weidows.gitee.io">Weidowsの博客</a>
          <a target="_blank" href="http://www.baidu.com/">百度</a>
          <a target="_blank" href="https://www.sina.com.cn/">新浪</a>
          <a target="_blank" href="http://www.hebau.edu.cn/">河北农业大学</a>
          <a target="_blank" href="http://www.wyw.cn/">中厨网</a>
          <a target="_blank" href="http://www.wyw.cn/">优信二手车</a>
          <a target="_blank" href="http://www.wyw.cn/">落阳地产</a>
          <a target="_blank" href="http://www.hegii.com/">汽车之家</a>
          <a
            target="_blank"
            href="https://shop68294732.taobao.com/?spm=a230r.7195193.1997079397.204.cYt8e7"
            >马克森天猫商城</a
          >
          <a target="_blank" href="resources/压缩包.zip" target="_blank"
            >下载压缩包</a
          >
        </div>
      </div>
    </footer>

    <div class="izl-rmenu">
      <a class="consult" target="_blank">
        <div class="phone" style="display: none">12345678910</div>
      </a>
      <a class="cart">
        <div class="pic"></div>
      </a>
      <!--回到顶/底部-->
      <a href="#header" class="btn_top"></a>
      <a href="#footer" class="btn_end"></a>
    </div>

    <script src="js/2.js"></script>
  </body>
</html>
